<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>电影模块</el-breadcrumb-item>
      <el-breadcrumb-item>电影管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
         <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输电影名称或者编号" clearable v-model="text" @clear="searchMovie">
            <el-button slot="append" icon="el-icon-search" @click="searchMovie"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <!-- 点击后去执行 addDialogVisible 弹出添加模态框 -->
          <el-button type="primary" @click="addDialogVisible = true">添加电影</el-button>
        </el-col>
      </el-row>

      <el-table :data="movieList" border stripe>
        <el-table-column label="电影ID" width="70" prop="movieId" ></el-table-column>
        <el-table-column label="电影名称" prop="movieName"></el-table-column>
        <el-table-column label="演员表" prop="movieActor"></el-table-column>
        <el-table-column label="导演" width="60" prop="movieDirector"></el-table-column>
        <el-table-column label="电影时间" width="70" prop="movieTime"></el-table-column>
        <el-table-column label="价格" width="60" prop="moviePrice"></el-table-column>
        <el-table-column label="发布日期" width="100" prop="movieReleaseDate"></el-table-column>
        <el-table-column label="电影状态" width="70" prop="movieState">
           <template scope="scope">
             <!-- 根据获得的数值来进行三元运算 -->
            {{ scope.row.movieState === 1 ?  '已上架': '' }}
            {{ scope.row.movieState === 0 ?  '未上架': '' }}
        </template>
        </el-table-column>
        <el-table-column label="获奖情况" width="100" prop="movieReward"></el-table-column>

        <el-table-column label="电影类型" width="70" prop="movieType">
          <!-- 循环定义在下方的数组,判断参数相同时回显 (v-for v-if 一起使用会有优先级问题,不建议放在一起使用) -->
          <template scope="scope">
            <span  v-for="t in movieTypes" v-if="scope.row.movieType==t.id" :key="t.id"   v-text="t.type"></span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <!-- 拿到整行数据  scope.row可以将整行所有的参数(整个对象的值)来进行传递-->
          <template slot-scope="scope" >
            <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
            <el-button type="danger" size="mini" @click="removeMovieById(scope.row.movieId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
                                  <!--    添加模态框     模态框绑定:visible.sync -->
    <el-dialog title="添加电影" :visible.sync="addDialogVisible" width="50%" @close="addMovieFormClose">
      <!-- :label-position 对齐-->
      <!-- ref 指定-->
      <!-- :model 绑定数据-->
      <!-- label-width 标签间距 -->
      <!-- :rules 绑定验证规则   1.设置完成后验证规则会去找命名方法中的所有既定规则-->
      <el-form
        :model="addMovieForm"
        :rules="addMovieFormRules"    
        ref="addMovieFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
      <!-- 验证的数组一定要写在父级标签的一行,否则验证方法无效   (可以通过input标签前方是否有红色*号 来进行判断) -->
        <el-form-item label="电影名称" prop="movieName">   
          <el-input v-model="addMovieForm.movieName" ></el-input>
        </el-form-item>
        <el-form-item label="演员表" prop="movieActor">
          <el-input v-model="addMovieForm.movieActor"></el-input>
        </el-form-item>
                <el-form-item label="导演" prop="movieDirector">
          <el-input v-model="addMovieForm.movieDirector"></el-input>
        </el-form-item>
                <el-form-item label="电影时间" >
          <el-input  v-model="addMovieForm.movieTime"></el-input>
        </el-form-item>
                <el-form-item label="价格" prop="moviePrice">
          <el-input v-model="addMovieForm.moviePrice"></el-input>
          <!-- 对象中有date 类型时  需要在前端进行格式化处理,否则会接收参数出错 -->
        </el-form-item>
                <el-form-item label="发布日期">
          <el-input  type="date" v-model="addMovieForm.movieReleaseDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-input>
        </el-form-item>
              

        <el-form-item label="电影状态" prop="movieState">
          <el-select v-model="addMovieForm.movieState" placeholder="请电影类型">
            <el-option label="可上架" value="1"></el-option>
            <el-option label="不可上架" value="2"></el-option>
          </el-select>
    
        </el-form-item>
        <el-form-item label="获奖情况">
          <el-input v-model="addMovieForm.movieReward"></el-input>
        </el-form-item>
       
        <el-form-item label="电影类型" prop="movieType">
          <el-select v-model="addMovieForm.movieType" placeholder="请电影类型">
            <el-option label="爱情" value="1"></el-option>
            <el-option label="动作" value="2"></el-option>
            <el-option label="动画" value="3"></el-option>
            <el-option label="纪录片" value="4"></el-option>
            <el-option label="家庭" value="5"></el-option>
            <el-option label="惊悚" value="6"></el-option>
            <el-option label="剧情" value="7"></el-option>
            <el-option label="科幻" value="8"></el-option>
            <el-option label="奇幻" value="9"></el-option>
            <el-option label="喜剧" value="10"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addMovie">确 定</el-button>
        <el-button @click="addDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

  <!-- 修改模态框 -->
<el-dialog title="修改权限" :visible.sync="editDialogVisible" width="50%" @close="editDepartFormClose">
      <!-- 修改模态框-->
      <el-form
        :model="editMovieForm"
        :rules="editMovieFormRules"
        ref="editMovieFormRef"
        label-width="100px"
        class="demo-ruleForm"
      >
       <el-form-item label="电影名称" prop="movieName">
          <el-input v-model="editMovieForm.movieName" ></el-input>
        </el-form-item>
        <el-form-item label="演员表" prop="movieActor">
          <el-input v-model="editMovieForm.movieActor"></el-input>
        </el-form-item>
                <el-form-item label="导演" prop="movieDirector">
          <el-input v-model="editMovieForm.movieDirector"></el-input>
        </el-form-item>
                <el-form-item label="电影时间">
          <el-input  v-model="editMovieForm.movieTime"></el-input>
        </el-form-item>
                <el-form-item label="价格" prop="moviePrice">
          <el-input v-model="editMovieForm.moviePrice"></el-input>
        </el-form-item>
                <el-form-item label="发布日期">
          <el-input  type="date" v-model="editMovieForm.movieReleaseDate" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-input>
        </el-form-item>
              
         <!-- v-model默认于:value绑定   当值为1的时候,会循环数组找到相同的数值,并在label中显示名称   (有双向绑定时可用,否则需要自己来定义对应数组)-->
        <el-form-item label="电影状态" >
          <el-select v-model="editMovieForm.movieState" placeholder="请电影类型">
            <el-option v-for="s in isShangJia" :key="s.id" :label="s.name" :value="s.id"></el-option> 
          </el-select>
    
        </el-form-item>
        <el-form-item label="获奖情况">
          <el-input v-model="editMovieForm.movieReward"></el-input>
        </el-form-item>
       
        <el-form-item label="电影类型"  >
          <el-select v-model="editMovieForm.movieType" placeholder="请电影类型">
            <!-- 有回显数据时  可以使用该方法进行绑定 -->
             <el-option v-for="s in movieTypes" :key="s.id" :label="s.type" :value="s.id"></el-option> 
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editPermission">确 定</el-button>
        <el-button @click="editDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>







  </div>
</template>
<script>
export default {
  data() {
    return {
      isShangJia:[
        {'id':1,'name':'已上架'},
        {'id':0,'name':'未上架'}
      ],
      movieTypes:[
        {'id':1,'type':'爱情'},
        {'id':2,'type':'动作'},
        {'id':3,'type':'动画'},
        {'id':4,'type':'纪录片'},
        {'id':5,'type':'家庭'},
        {'id':6,'type':'惊悚'},
        {'id':7,'type':'剧情'},
        {'id':8,'type':'科幻'},
        {'id':9,'type':'奇幻'},
        {'id':10,'type':'喜剧'},
      ],
      text:'',//模糊查询输入框的输入信息(名字和ID用同一个输入框来进行判断)
      pageNum: 1,
      pageSize: 5,
      movieList: [],
      total: 0,
      addDialogVisible: false, //模态框初始状态设置为关闭
      editDialogVisible:false,

      addMovieForm:{
        movieName: "",
        movieActor: "",
        movieDirector: "",
        movieTime: "",
        moviePrice: 0,
        movieReleaseDate:'',
        movieState:null,
        movieReward:'',
        movieType:'无'
      },

       editMovieForm:{
        movieId:0,
        movieName: "",
        movieActor: "",
        movieDirector: "",
        movieTime: "",
        moviePrice: 0,
        movieReleaseDate:'',
        movieState:null,
        movieReward:'',
        movieType:''
      },
      addMovieFormRules: {
        movieName: [
          { required: true, message: "请输入电影名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "电影名称在2-20個字符之間",
            trigger: "blur",
          }
        ],
        movieActor:[
          { required: true, message: "请输入演员信息", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "演员信息在2-30個字符之間",
            trigger: "blur",
          }
        ],
        movieDirector:[
          { required: true, message: "请输入导演信息", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "导演信息在2-10個字符之間",
            trigger: "blur",
          }
        ],
        moviePrice:[
          { required: true, message: "请输入价格信息", trigger: "blur" },
          {
            min: 0,
            max: 5,
            message: "价格在0-5個字符之間",
            trigger: "blur",
          }
        ],
        movieState:[
          { required: true, message: "请选择电影状态信息", trigger: "blur" },
          {
            min: 0,
            max: 1,
            trigger: "blur",
          }
        ],
        movieType:[
          { required: true, message: "请选择电影类型信息", trigger: "blur" },
          {
            min: 0,
            max: 5,
            trigger: "blur",
          }
        ],

     
        
      },
      editMovieFormRules:{
        movieName: [
          { required: true, message: "请输入电影名称", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "电影名称在2-20個字符之間",
            trigger: "blur",
          }
        ],
        movieActor:[
          { required: true, message: "请输入演员信息", trigger: "blur" },
          {
            min: 2,
            max: 30,
            message: "演员信息在2-30個字符之間",
            trigger: "blur",
          }
        ],
        movieDirector:[
          { required: true, message: "请输入导演信息", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "导演信息在2-10個字符之間",
            trigger: "blur",
          }
        ],
        moviePrice:[
          { required: true, message: "请输入价格信息", trigger: "blur" },
          {
            min: 0,
            max: 5,
            message: "价格在0-5個字符之間",
            trigger: "blur",
          }
        ],
        movieState:[
          { required: true, message: "请选择电影状态信息", trigger: "blur" },
          {
            min: 0,
            max: 1,
            trigger: "blur",
          }
        ],
        movieType:[
          { required: true, message: "请选择电影类型信息", trigger: "blur" },
          {
            min: 0,
            max: 5,
            trigger: "blur",
          }
        ]
      }
     
      
    }
    
  },
  methods: {
 
    getmovieList() {
      this.$api.movie
      .movieList({
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          text:this.text

      }).then(res => {
          this.pageNum = res.data.pageNum
          this.pageSize = res.data.pageSize
          this.total = res.data.total
          this.movieList = res.data.list

      })
    },
    //删除    
   async removeMovieById(id){      //如果要使用弹出提示框 需要在方法上添加、async(异步)关键字后 才可以使用(await)等待关键字 
       const res = await this.$confirm("此操作将永久删除该权限, 是否继续?", "提示", { 
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch((err) => err)

      //选择确定是  返回值为:confirm
       if ("confirm" === res) {
         this.$api.movie
          .deleteMovie(id)
          .then(res => {
              this.$message.success("删除成功");
              this.searchMovie();
          })
          .catch(err => {
            this.$message.error("服务端异常，请联系管理员");
          });



       }else {
          this.$message.info("取消删除")
       }
       
    },
     showEditDialog(row) {
      /*点击修改事件之后将模态框状态调整为true */
      this.editDialogVisible = true
      this.editMovieForm.movieId = row.movieId
      this.editMovieForm.movieName = row.movieName
      this.editMovieForm.movieActor = row.movieActor
      this.editMovieForm.movieDirector = row.movieDirector
      this.editMovieForm.movieTime = row.movieTime
      this.editMovieForm.moviePrice = row.moviePrice
      this.editMovieForm.movieReleaseDate = row.movieReleaseDate
      this.editMovieForm.movieState = row.movieState
      this.editMovieForm.movieReward = row.movieReward
      this.editMovieForm.movieType = row.movieType 
    },
    
    //监听模态框 使用close方法  发生关闭时清空所有输入字符
    editDepartFormClose(){
      this.$refs.editMovieFormRef.resetFields();
    },
    //修改1
    editPermission(){
      this.$refs.editMovieFormRef.validate((valid) => {
        //通过验证规则,全部通过时,返回ture
        if (!valid) return
            this.$api.movie
          .updateMovie(this.editMovieForm)
          .then(res => {
              this.editDialogVisible = false
          if (res.data.code == 200) {
            this.$message.success("修改成功")
            this.searchMovie();
          } else {
            this.$message.error("服务端异常，请联系管理员")
          }

          })

        })
      

    },

    //关闭模态框时 清空所有输入框内信息
      addMovieFormClose(){
        this.$refs.addMovieFormRef.resetFields();
      
      },
      //添加
    addMovie() {
          this.$refs.addMovieFormRef.validate((valid) => {
        if (!valid) return
        this.$api.movie
          .movieAdd(this.addMovieForm)
          .then(res => {
              this.addDialogVisible = false
          if (res.data.code == 200) {
            this.$message.success("添加成功")
            this.searchMovie();
          } else {
            this.$message.error("服务端异常，请联系管理员")
          }

          })
  
        })
          
    },
    searchMovie() {
      this.pageNum = 1
      this.pageSize = 10
      this.getmovieList()
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.getmovieList()
    },
    handleCurrentChange(newPage) {
      this.pageNum = newPage
      this.getmovieList()
    },
    reloadData() {
      //查询 列表
      this.searchMovie()
    },
  },
  created() {
    this.reloadData()
  },
}
</script>
<style lang="less" scoped></style>
